<template>
    <div class="form-group select-time">
        <label>
            <span :class="labelClass">{{label}}</span>
            <input class="form-control" :required="required" v-model="data" :placeholder="pl" :name="name"
                   readonly :class="inputClass" @click.stop="click" />
        </label>
        <div class="selection animated" v-if="show" ref="selection" @click.stop="stop">
            <ul v-for="(select, id) in selectData" :key="id" class="nav select-nav">
                <li class="divider">{{select.label}}</li>
                <li>
                    <ul class="nav select-time-action">
                        <li v-for="(num, index) in select.max - select.min" :key="index">
                            <a class="select-value" :data-type="select.unit" :data-value="index * select.gap"
                               :data-index="id" :data-label="select.label" @click="selectTime">
                                {{index * select.gap}}
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    /* eslint-disable no-undef */

    export default {
        name: 'select-time',
        data () {
            return {
                data: this.value,
                show: false,
                time: []
            };
        },
        props: {
            label: {type: String},
            required: {type: String},
            value: {type: String | Number},
            name: {type: String},
            pl: {type: String},
            inputClass: {type: String},
            labelClass: {type: String},
            selectData: {
                type: Array,
                default: () => {
                    return [
                        {
                            label: '小时',
                            unit: 'h',
                            min: 10,
                            gap: 1,
                            max: 24
                        },
                        {
                            label: '分钟',
                            unit: 'm',
                            min: 0,
                            gap: 1,
                            max: 60
                        },
                        {
                            label: '秒',
                            unit: 's',
                            min: 0,
                            gap: 1,
                            max: 60
                        }
                    ];
                }
            }
        },
        watch: {
            value (newVal) {
                this.data = newVal;
            },
            data (newVal) {
                let str = '';
                $.each(this.time, (index, item) => {
                    if (item === undefined) return;
                    str += `${item.value}${item.unit} `;
                });
                this.$emit('input', str);
            }
        },
        methods: {
            stop () {
            },
            click () {
                if (this.show === false) {
                    this.show = true;
                }
                let selection = $(this.$refs.selection);
                if (selection.hasClass('bounceInUp')) {
                    selection.addClass('bounceOut');
                    selection.removeClass('bounceInUp');
                } else {
                    selection.addClass('bounceInUp');
                    selection.removeClass('bounceOut');
                }
            },
            selectTime (e) {
                let tagger = $(e.srcElement);
                let type = tagger.attr('data-type');
                let value = tagger.attr('data-value');
                let index = tagger.attr('data-index');
                let label = tagger.attr('data-label');
                $(`.select-value[data-type="${type}"]`).removeClass('active');
                tagger.addClass('active');
                this.time[index] = {
                    unit: type,
                    label: label,
                    value: value
                };
                this.setValue();
            },
            setValue () {
                let str = '';
                $.each(this.time, (index, item) => {
                    if (item === undefined) return;
                    str += `${item.value}${item.label} `;
                });
                this.data = str;
            }
        },
        mounted () {
            this.$nextTick(() => {
                $(document).click(() => {
                    let selection = $(this.$refs.selection);
                    selection.addClass('bounceOut');
                    selection.removeClass('bounceInUp');
                });
            });
        }
    };
</script>

<style scoped lang="scss">
    .form-group label {
        display: block;
    }

    .select-time {
        position: relative;
        .selection {
            border: 1px solid #e5e5e5;
            position: absolute;
            top: 60px;
            left: 0;
            background-color: white;
            border-radius: 5px;
            z-index: 1020;
            .select-nav {
                display: inline-block;
                padding: 10px;
                .divider {
                    border-bottom: 1px solid #e3e3e3;
                }
                li {
                    text-align: center;
                    display: block;
                    .select-time-action {
                        max-height: 300px;
                        overflow-y: auto;
                        a {
                            cursor: pointer;
                        }
                        a.active {
                            color: white;
                            background: #1ab394;
                        }
                    }
                }
            }
        }
    }
</style>
